<template>
  <div class="ticketList-box">
    <div class="ticketList-top-btn">
      <el-button icon="el-icon-plus" @click="addData('add')">新建价格组</el-button>
    </div>
    <el-table empty-text="赶快发布一个价格组吧~" v-loading="loadingTable" element-loading-text="拼命加载中" :data="$store.state.priceList" @cell-click="cellClick" border style="width: 100%">
      <el-table-column align="center" label="名称">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="点击进入详情" placement="top">
            <p style="cursor: pointer;">{{ scope.row.head.pname }}</p>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="head.vnote" align="center" label="备注"></el-table-column>
      <el-table-column width="180" align="center" label="发布时间">
        <template slot-scope="scope">
          <p>{{ scope.row.head.createDate | datetime }}</p>
        </template>
      </el-table-column>
      <el-table-column width="240" fixed="right" align="center" label="操作">
        <template slot-scope="scope">
          <el-button @click="editData('edit',scope.row)" style="margin-right: 10px" type="text">编辑</el-button>
          <!-- <el-button v-if="scope.row.body.length>0&&scope.row.head.ptype!=0" @click="resetLinkFun(scope.row)" style="margin-right: 10px;color:#F56C6C" type="text">重置链接</el-button> -->
          <!-- <el-button v-if="scope.row.body.length>0" @click="resetLinkFun(scope.row)" style="margin-right: 10px;color:#F56C6C" type="text">重置链接</el-button> -->
          <input type="text" v-if="scope.row.head.linkId" style=" opacity: 0;width:0px" v-model="scope.row.head.linkId">
          <el-button v-if="scope.row.body.length>0" v-clipboard:copy="scope.row.head.linkId" v-clipboard:success="onCopy" v-clipboard:error="onError" type="text">复制链接</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="el-pagination-box" v-if="$store.state.priceList.amount">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="$pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="$store.state.priceList.amount"></el-pagination>
    </div>
    <!-- 新建价格组 -->
    <el-dialog :title="this.statusTips == 'add' ? '新建价格组' :'编辑价格组' " :visible.sync="priceAlert">
      <el-form :model="priceForm">
        <el-form-item label-width="100px" label="价格组名称">
          <el-input v-model="priceForm.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label-width="100px" label="备注">
          <el-input type="textarea" :autosize="{ minRows: 2}" v-model="priceForm.remarks" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="priceAlert = false">取消</el-button>
        <el-button :loading="loadingAddPrice" type="primary" @click="addPriceList">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import GetDataFun from "./../js/GetDataFun.js"; //得到一些数据的方法

export default {
  data() {
    return {
      priceAlert: false, // 价格组的显示隐藏
      loadingAddPrice: false, // 创建时动画
      loadingTable: false, // 表格
      startDate: "",
      endDate: "",
      currentPage: 1, // 当前页数
      pageSize: 10, // 每页多少条
      statusTips: "",
      infoForm: {},
      priceForm: {
        name: "",
        remarks: ""
      } //新建价格组表单
    };
  },
  created() {
    this.handleCurrentChange(this.currentPage);
  },
  methods: {
    // 新增价格组
    addData(item) {
      this.priceForm = {};
      this.statusTips = item;
      this.priceAlert = true;
    },
    // 编辑价格组
    editData(item, scopeRow) {
      this.statusTips = item;
      this.priceAlert = true;
      this.infoForm = scopeRow;
      this.priceForm = {
        name: scopeRow.head.pname,
        remarks: scopeRow.head.vnote
      };
    },
    // 提交价格组
    addPriceList() {
      if (!this.priceForm.name) {
        this.$message({
          message: "请输入价格组名称",
          type: "warning"
        });
        return;
      }
      if (!this.priceForm.remarks) {
        this.$message({
          message: "请输入备注",
          type: "warning"
        });
        return;
      }
      let url = "";
      let subData = {};
      let ptype = 1;
      if (this.$store.state.priceList.length < 1) {
        ptype = 0;
      } else {
        ptype = 1;
      }
      if (this.statusTips == "add") {
        url = "/api/isv/ticketPurchasePC/addTicketPrciceGroup";
        subData = {
          head: {
            ptype: ptype, //0表示设置为默认
            status: 0,
            projectId: this.$store.state.activityId,
            pname: this.priceForm.name,
            vnote: this.priceForm.remarks
          }
        };
      }
      if (this.statusTips == "edit") {
        url = "/api/isv/ticketPurchasePC/updateTicketPrciceGroup";
        subData = this.infoForm;
        subData.head.pname = this.priceForm.name;
        subData.head.vnote = this.priceForm.remarks;
      }

      this.$http.post(url, subData).then(
        res => {
          this.loadingAddPrice = true;
          if (res.data.success) {
            this.$message({
              message: "价格组新建成功",
              type: "success"
            });
            this.loadingAddPrice = false;
            this.priceAlert = false;
            this.priceForm = {};
            this.handleCurrentChange(this.currentPage);
          } else {
            this.$message({
              message: res.data.errorMsg || "数据提交失败",
              type: "warning"
            });
          }
        },
        err => {
          this.loadingAddPrice = false;
          this.$message.error("服务器出小差了");
        }
      );
    },
    // 跳转到详情
    cellClick(row, column) {
      if (column.label == "名称") {
        this.$router.push({
          path: "/priceDetails",
          query: {
            pricegroupId: row.head.pricegroupId,
            linkId: row.head.linkId
          }
        });
      }
    },
    // 重置链接
    resetLinkFun(item) {
      this.$confirm("您确定要重置链接, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let targetPriceGroupId = "";
          for (let i = 0; i < this.$store.state.priceList.length; i++) {
            if (this.$store.state.priceList[i].head.ptype == 0) {
              targetPriceGroupId = this.$store.state.priceList[i].head
                .pricegroupId;
            }
          }
          let subData = {
            priceGroupId: item.head.pricegroupId,
            targetPriceGroupId: targetPriceGroupId
          };
          this.$http
            .post(
              "/api/isv/ticketPurchasePC/resetLinkByTicketPrciceGroupId",
              subData
            )
            .then(
              res => {
                if (res.data.success) {
                  this.$message({
                    type: "success",
                    message: "重置成功!"
                  });
                  this.handleCurrentChange(this.currentPage);
                } else {
                  this.$message({
                    message: res.data.errorMsg || "重置失败",
                    type: "warning"
                  });
                }
              },
              err => {
                this.$message.error("请重试！");
              }
            );
        })
        .catch(() => {});
    },
    // 初始化要复制的值
    initCopyValue() {
      for (let i = 0; i < this.$store.state.priceList.length; i++) {
        this.getLinkId(this.$store.state.priceList[i]);
      }
    },
    //得到linkid
    getLinkId(item) {
      let subData = {
        priceGroupId: item.head.pricegroupId
      };
      this.$http
        .post("/api/isv/ticketPurchasePC/getLinkByTicketPrciceGroupId", subData)
        .then(
          res => {
            if (res.data.success) {
              this.$set(
                item.head,
                "linkId",
                `https://${document.domain}/isv_products_signup_mui/?linkId=` +
                  res.data.result.linkId +
                  "#/buyTicketHome"
              );
            }
          },
          err => {}
        );
    },
    // 查询数据
    async handleCurrentChange(val) {
      this.currentPage = val;
      this.loadingTable = true;
      await GetDataFun.getPriceList(this.currentPage, this.pageSize).then(
        res => {
          this.initCopyValue();
        },
        err => {}
      );
      this.loadingTable = false;
    },
    async handleSizeChange(val) {
      this.pageSize = val;
      this.loadingTable = true;
      await GetDataFun.getPriceList(this.currentPage, this.pageSize).then(
        res => {},
        err => {}
      );
      this.loadingTable = false;
    },
    onCopy: function() {
      this.$message({
        type: "success",
        message: "复制成功"
      });
    },
    onError: function() {
      this.$message.error("复制失败");
    },
    // 删除数据
    ticketDel(ticketD) {
      this.$confirm("您确定是否要进行删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let subData = {
            activityId: ticketD.activityId,
            ticketTypeId: ticketD.ticketTypeId
          };
          this.$http.post("/api/isv/ticketType/delTicketType", subData).then(
            res => {
              if (res.data.success) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.handleCurrentChange(this.currentPage);
              } else {
                this.$message({
                  message: res.data.errorMsg || "删除失败",
                  type: "warning"
                });
              }
            },
            err => {
              this.$message.error("服务器出小差了");
            }
          );
        })
        .catch(() => {});
    }
  }
};
</script>

<style scoped>
.ticketList-box {
  width: 100%;
  min-height: 200px;
  background: #fff;
  border-radius: 6px;
  padding: 16px 26px;
}
.ticketList-top-btn {
  width: 100%;
  height: auto;
  margin: 10px 0px 20px 0px;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-align-items: center;
  align-items: center;
}
.cellPLeft {
  text-align: left;
  width: 100%;
}
.table_content .el-table th {
  background-color: #f9f9f9 !important;
}
</style>
